<template>
  <nly-content-wrapper>
    <nly-content-header>
      <nly-container fluid>
        <nly-row class="mb-2">
          <nly-col sm="6">
            <h1>nly-nav</h1>
          </nly-col>
        </nly-row>
      </nly-container>
    </nly-content-header>
    <nly-content>
      <nly-container>
        <div style="margin: 1rem;">
          <nly-nav tabs>
            <nly-nav-item active class="xxx">
              tabs active
            </nly-nav-item>

            <nly-nav-item disabled>
              tabs disabled
            </nly-nav-item>

            <nly-nav-item>
              tabs
            </nly-nav-item>
          </nly-nav>
        </div>

        <div style="margin: 1rem;">
          <nly-nav tabs small>
            <nly-nav-item active class="xxx">
              tabs small active
            </nly-nav-item>

            <nly-nav-item disabled>
              tabs small disabled
            </nly-nav-item>

            <nly-nav-item>
              tabs small
            </nly-nav-item>
          </nly-nav>
        </div>

        <div style="margin: 1rem;">
          <nly-nav fill tabs>
            <nly-nav-item active class="xxx">
              fill active
            </nly-nav-item>

            <nly-nav-item disabled>
              fill disabled
            </nly-nav-item>

            <nly-nav-item>
              fill-------
            </nly-nav-item>
          </nly-nav>
        </div>

        <div style="margin: 1rem;">
          <nly-nav justified tabs>
            <nly-nav-item active class="xxx">
              justified active
            </nly-nav-item>

            <nly-nav-item disabled>
              justified disabled
            </nly-nav-item>

            <nly-nav-item>
              justified-------
            </nly-nav-item>
          </nly-nav>
        </div>

        <div style="margin: 1rem;">
          <nly-nav align="center" tabs>
            <nly-nav-item active class="xxx">
              align="center" active
            </nly-nav-item>

            <nly-nav-item disabled>
              align="center" disabled
            </nly-nav-item>

            <nly-nav-item>
              align="center"-------
            </nly-nav-item>
          </nly-nav>
        </div>

        <div style="margin: 1rem;">
          <nly-nav align="left" tabs>
            <nly-nav-item active class="xxx">
              align="left" active
            </nly-nav-item>

            <nly-nav-item disabled>
              align="left" disabled
            </nly-nav-item>

            <nly-nav-item>
              align="left"-------
            </nly-nav-item>
          </nly-nav>
        </div>

        <div style="margin: 1rem;">
          <nly-nav align="right" tabs>
            <nly-nav-item active class="xxx">
              align="right" active
            </nly-nav-item>

            <nly-nav-item disabled>
              align="right" disabled
            </nly-nav-item>

            <nly-nav-item>
              align="right"-------
            </nly-nav-item>
          </nly-nav>
        </div>

        <div style="margin: 1rem;">
          <nly-nav pills>
            <nly-nav-item active class="xxx">
              pills active
            </nly-nav-item>

            <nly-nav-item disabled>
              pills disabled
            </nly-nav-item>

            <nly-nav-item>
              pills-------
            </nly-nav-item>
          </nly-nav>
        </div>

        <div style="margin: 1rem;">
          <nly-nav tabs vertical>
            <nly-nav-item active class="xxx">
              tabs vertical active
            </nly-nav-item>

            <nly-nav-item disabled>
              tabs vertical disabled
            </nly-nav-item>

            <nly-nav-item>
              tabs vertical-------
            </nly-nav-item>
          </nly-nav>
        </div>

        <div style="margin: 1rem;">
          <nly-nav tabs tabs-right vertical>
            <nly-nav-item active class="xxx">
              tabs tabs-right active
            </nly-nav-item>

            <nly-nav-item disabled>
              tabs tabs-right disabled
            </nly-nav-item>

            <nly-nav-item>
              tabs tabs-right vertical-------
            </nly-nav-item>
          </nly-nav>
        </div>

        <nly-card headerVariant="info" card-tabs>
          <nly-card-header>
            <nly-nav tabs card-header>
              <nly-nav-item active class="xxx">
                tabs card-header active
              </nly-nav-item>

              <nly-nav-item disabled>
                tabs card-header disabled
              </nly-nav-item>

              <nly-nav-item>
                tabs card-header-------
              </nly-nav-item>
            </nly-nav>
          </nly-card-header>
        </nly-card>

        <nly-card card-outline-tabs card-tabs>
          <nly-card-header>
            <nly-nav tabs card-header>
              <nly-nav-item active class="xxx">
                tabs card-header active
              </nly-nav-item>

              <nly-nav-item disabled>
                tabs card-header disabled
              </nly-nav-item>

              <nly-nav-item>
                tabs card-header-------
              </nly-nav-item>
            </nly-nav>
          </nly-card-header>
        </nly-card>
      </nly-container>
    </nly-content>
  </nly-content-wrapper>
</template>
